/*
 * @Description: 妆容列表
 * @Author: kanglin
 * @Date: 2018-06-11 17:09:31
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    @import '~src/assets/css/common.less';
    .collection__makeups{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		min-height: 100%;
		padding-top: 80*@rem-per-px;
		background: #fff;
		box-sizing: border-box;
		&.no-padding-top {
			padding-top: 0;
		}
        .list{
            padding-top: 6*@rem-per-px;
            width: 736*@rem-per-px;
            margin:0 auto;
        }
        .list__item{
            display: inline-block;
            font-size: 0;
            width: 340*@rem-per-px;
            height: 454*@rem-per-px;
            margin:14*@rem-per-px;
			border-radius: 14*@rem-per-px;
            overflow: hidden;
			position: relative;
			background-size: cover;
			background-position-x: center;
            &>img{
                width: 100%;
            }
        }
        .list__item__icon{
            position: absolute;
            right: -20*@rem-per-px;
            top: -20*@rem-per-px;
            width: 150*@rem-per-px;
            height: 150*@rem-per-px;
			background:url('//beauty-mirror.gz.bcebos.com/wx_system/collection/web_heart_animation.png');
			background-position: right;
			background-repeat:no-repeat;
			background-size: 2900%;
			transition: opacity .3s ease;
			opacity: 0;
			&.show-collection {
				opacity: 1;
			}
		}
		// 收藏
		.list__item__icon.collection {
			animation-name: heartBlast;
			animation-duration: .8s;
			animation-iteration-count: 1;
			animation-timing-function: steps(28);
		}
		// 取消收藏
		.list__item__icon.cancel-collection {
			&::after {
				content: "";
				display: block;
				position: absolute;
				top: 0px;
				left: 0px;
				right: 0px;
				bottom: 0px;
				border-radius: 20px;
				pointer-events: none;
				background-image: radial-gradient(circle, #aab8c2 10%, transparent 10.01%);
				background-repeat: no-repeat;
				background-position: 50%;
				transform: scale(5, 5);
				opacity: 0;
				transition: transform .3s, opacity .5s;
			}
			&:active:after {
				transform: scale(0, 0);
				opacity: .8;
				transition: 0s;
			}
			&.finish {
				background-position: left;
			}
		}

        .button{
            position: fixed;
            width: 100*@rem-per-px;
            height: 100*@rem-per-px;
            border-radius: 50%;
            bottom:20*@rem-per-px;
            right: 20*@rem-per-px;
            background: #ffffff;
            box-shadow:0 0 20px -8px #DC143C;
            color: #FFB6C1;
            font-size: 30*@rem-per-px;
            line-height: 100*@rem-per-px;
            text-align: center;
			text-decoration: none;
			&::after {
				content: '';
				position: absolute;
				top: -10px;
				bottom: -10px;
				left: -10px;
				right: -10px;
				box-shadow:0 0 20px -8px #821cde;
				background-repeat: no-repeat;
				background-position: 50%;
				border-radius: 50%;
				opacity: 0;
				transition: all .3s;
			}
			&:active::after {
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				opacity: .5;
				transition: 0s;
			}
        }
	}

	// 收藏时的逐帧动画
	@keyframes heartBlast {
		0% {
			background-position: left;
		}
		100% {
			background-position: right;
		}
	}
</style>
<template>
	<div :class="[$status.isWxBrowser() ? 'no-padding-top' : '','collection__makeups']">
		<ul
			v-infinite-scroll="loadMore"
			class="list"
			infinite-scroll-disabled="busy"
			infinite-scroll-distance="10">
			<li
				v-for="(item, index) in makeups"
				:key="item.id"
				:style="{backgroundImage: 'url('+item.try_on_photo+')'}"
				class="list__item"
				@click="handleClickItem(index, item.id)">
				<!-- <img
					:src="item.try_on_photo"
					alt=""> -->
				<i
					:class="[ item.selected ? 'cancel-collection' : 'collection',
						item.finish ? 'finish' : '',
						is_editing ? 'show-collection' : '' ]"
					class="list__item__icon"
					@click.stop="selecteMakeup(index)"/>
			</li>
		</ul>
		<a
			href="JavaScript:;"
			class="button"
			@click="handleEdit">
			{{ is_editing ? $t('collection.done'): $t('collection.edit') }}
		</a>

	</div>
</template>

<script>
import infiniteScroll from 'vue-infinite-scroll';
import { mapMutations } from 'vuex';
import { setTimeout } from 'timers';

export default {
	name: 'CollectionMakeups',
	directives: { infiniteScroll },
	// components: { Confirm },
	props: {
		makeups: {
			type: Array,
			required: true,
		},
		cancelFavors: {
			type: Function,
			required: true,
		},
		fetchMakeups: {
			type: Function,
			required: true,
		},
	},
	data() {
		return {
			is_editing: false,
			busy: false,
			is_visible_confirm: false,
			is_final: false,
		};
	},
	methods: {
		...mapMutations('collection', ['saveCollectionDetail']),

		/**
         *  开启编辑状态
		 * 	@return {undefined}
         */
		handleEdit() {
			this.is_editing = !this.is_editing;
			const selected_makeup_ids = this.getSelectedMakeupIds();
			if (!this.is_editing && selected_makeup_ids.length > 0) {
				this.$vux.confirm.show({
					content: this.$t('collection.is_cancel_collection'),
					onConfirm: () => {
						this.cancelFavors(selected_makeup_ids);
					},
				});
			}
		},

		/**
		 * 获取取消收藏的图片id
		 * @return {Array}
		 */
		getSelectedMakeupIds() {
			return this.makeups
				.filter(item => item.selected)
				.map(item => item.id);
		},

		/**
         * 取消收藏
		 * @param {String} index {索引值}
		 * @return {undefined}
         */
		selecteMakeup(index) {
			this.$set(this.makeups[index], 'finish', false);
			if (this.makeups[index].selected) { // 勾选收藏
				this.makeups[index].selected = !this.makeups[index].selected;
			} else {
				this.$set(this.makeups[index], 'selected', true);
			}
			setTimeout(() => {
				this.$set(this.makeups[index], 'finish', true);
			}, 300);
		},

		/**
		 *  没有被选择?
		 */
		isSelected(id) {
			return this.selected_makeup_ids.has(id);
		},

		/**
		 * 查看收藏详情
		 * @param  {Number} index {索引值}
		 * @param  {Number} id    {图片id}
		 * @return {undefined} {description}
		 */
		handleClickItem(index, id) {
			if (!this.is_editing) { // 跳转
				this.saveCollectionDetail(this.makeups[index]);
				this.$router.push({
					path: `/collection/${id}`,
				});
			}
		},

		/**
		 *  滚动加载
		 * 	@return {undefined}
		 */
		loadMore() {
			if (this.is_final) { return; }
			this.busy = true;
			this.fetchMakeups()
				.catch((error) => {
					if (error.message === 'final') { // 结束
						this.busy = false;
						this.is_final = true;
					} else {
						const toast = this.$createToast({
							type: 'error',
							time: 2000,
							txt: error.message,
						});
						toast.show();
						this.$router.replace({ path: '/login' });
					}
				})
				.then(() => {
					this.busy = false;
				});
		},
	},
};
</script>

